<template>
	<view class="image-container">
		<image v-if="!imgDel" v-show="imgLoaded" :src="imageSrc" :mode="mode ? mode : 'aspectFit'" @error="onErrorImg" @load="onSuccessImg"/>
		<image v-show="!imgLoaded" src='/static/login.png' mode="aspectFit" style="opacity: 0.7;"/>
	</view>
</template>

<script setup>
import {ref, onMounted, watch, onUnmounted} from 'vue'
let props = defineProps(['src', 'errorSrc', 'mode'])
let imageSrc = ref('')
let imageError = ref('')
const imgDel = ref(false)
let imgLoaded = ref(false)

watch(() => props.src, (newSrc) => {
	imageSrc.value = newSrc
}, {
	immediate: true
})

onUnmounted(() => {
	imgDel.value = true
})
// onMounted(() => {
// 	imageSrc.value = props.src
// 	imageError.value = props.errorSrc
// })

const onErrorImg = () => {
	imgLoaded.value = false
}
const onSuccessImg = () => {
	imgLoaded.value = true
}

const handleImageError = (error) => {
	imageSrc.value = '/static/pic.png'
}
</script>

<style scoped>
	:global(base-cover-image) {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.image-container {
		position: relative;
		z-index: 0;
		transform: translate3d(0,0,0);
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>